import { Steps, Table } from 'nextra/components'
import { Callout } from '@/components'

# Installation

<Steps>

### Check supported browsers

Suspensive Libraries are optimized for modern browsers. It is compatible with the following browsers config.

<br />

<Table>
  <tbody>
    {[
      { browser: 'Chrome', version: '>= 51' },
      { browser: 'Firefox', version: '>= 53' },
      { browser: 'Edge', version: '>= 18' },
      { browser: 'Safari', version: '>= 11' },
      { browser: 'iOS', version: '>= 11' },
      { browser: 'Opera', version: '>= 38' },
    ].map((item) => (
      <Table.Tr key={item.browser}>
        <Table.Td>{item.browser}</Table.Td>
        <Table.Td className="text-center">{item.version}</Table.Td>
      </Table.Tr>
    ))}
  </tbody>
</Table>

> Depending on your environment, you might need to add polyfills. If you want to support older browsers, you need to transpile the library from node_modules yourselves.

### Check supported react, @tanstack/react-query version

<br />

<Table>
  <tbody>
    {[
      { library: 'react', version: '^18 || ^19' },
      { library: '@tanstack/react-query', version: '^4 || ^5' },
    ].map((item) => (
      <Table.Tr key={item.library}>
        <Table.Td>{item.library}</Table.Td>
        <Table.Td className="text-center">{item.version}</Table.Td>
      </Table.Tr>
    ))}
  </tbody>
</Table>

### Add as Dependencies

[![npm version](https://img.shields.io/npm/v/@suspensive/react-query?color=000&labelColor=000&logo=npm&label=)](https://www.npmjs.com/package/@suspensive/react-query)

@suspensive/react-query is available on npm.
From version 2.2.0 onwards, it supports both v4 and v5 of @tanstack/react-query. Depending on the version of @tanstack/react-query specified in your package.json dependencies, the appropriate version of @suspensive/react-query will be used automatically.

To use the latest stable version, run the following command.

```shell npm2yarn
npm install @suspensive/react-query @suspensive/react @tanstack/react-query
```

To use @tanstack/react-query v4, run the following command.
@tanstack/react-query v4 supports [lower version browsers](/docs/react-query/motivation#solution-for-the-issue-of-tanstackreact-query-v5-not-being-able-to-support-lower-version-browsers-due-to-es-private-field) compared to v5.

```shell npm2yarn
npm install @suspensive/react-query @suspensive/react @tanstack/react-query@4
```

<Callout type='info'>

@suspensive/react-query internally uses @tanstack/react-query v4 or v5 as peerDependencies. Therefore, ensure that the correct version of @tanstack/react-query is installed in your package.json dependencies. The reasons are explained in [Why Use This?](/docs/react-query/motivation).

</Callout>

</Steps>
